<style type="text/css">
    .el-upload-list {
        margin-left: 0px !important;
    }

    .v_id_{{ name }} {
        display: inline-block;
    }

    .v_id_{{ name }} ul {
        margin-left: 0px;
        padding-left: 0px;
    }

    .v_id_{{ name }} .el-upload-dragger {
        width: auto;
        height: auto;
        border: none;
    }

    em {
        color: red;
        font-style: normal;
    }
</style>
<template id="v_id_{{ name }}">
    <div class="v_id_{{ name }}">
        <input style="display: none" type="text" name="{{ widget.name }}" :value="selectedCompanyId">
        <el-select style="width: 500px;" v-model="selectedCompanyId" clearable filterable
                   remote
                   reserve-keyword
                   placeholder="请输入关键词(企业名称/法人姓名/统一信用代码/法人手机号）"
                   :remote-method="remoteMethod"
                   :loading="loading"
                   @change="onSelectedChange"
        >
            <el-option
                    v-for="item in options"
                    v-html="item.label"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>
    </div>
</template>
<script type="text/javascript">
    var app_{{ name }} = new Vue({
        el: '#v_id_{{ name }}',
        data: {
            BASE_URL: "https://www.umiware.com/api",
            ACCESS_TOKEN: '{{ AccessToken }}',
            dialogVisible: false,
            file_list: [],
            selectedCompanyId: '{{ widget.value }}' === 'None' ? '' : '{{ widget.value }}',
            loading: false,
            options: [],
        },
        beforeCreat() {
        },
        created() {
            this.initOptions();
        },
        mounted() {
            this.value = this.value === 'None' ? '' : '已经选择了:' + this.value;
        },
        beforeUpdate() {
        },
        activated() {
        },
        methods: {
            remoteMethod(query) {
                this.loading = true;
                let _this = this;
                $.ajax({
                    url: _this.BASE_URL + '/company/associate',
                    type: 'GET',
                    dataType: 'json',
                    contentType: 'application/json;charset=UTF-8',
                    headers: {
                        'AccessToken': _this.ACCESS_TOKEN,
                    },
                    data: {keyword: query},
                    success: function (data) {
                        _this.loading = false;
                        console.log(data)
                        if (data.status === 0) {
                            _this.options = Array.from(data.result).map((item) => ({
                                value: item._id,
                                label: item.nameHighlighted + "/" + item.uccHighlighted + "/" + item.legalRepNameHighlighted + "/" + item.telHighlighted,
                            }))
                        }
                    },
                    error: function (xhr, errorType, error) {
                        alert('Ajax request error, errorType: ' + errorType + ', error: ' + error)
                    }
                });
            },
            initOptions() {
                let _this = this;
                if (this.selectedCompanyId === '' || this.selectedCompanyId === 'None') {
                    this.remoteMethod("");
                } else {
                    $.ajax({
                        url: _this.BASE_URL + '/dispatch/company',
                        type: 'GET',
                        dataType: 'json',
                        data: {id: _this.selectedCompanyId},
                        headers: {
                            'AccessToken': _this.ACCESS_TOKEN,
                        },
                        withCredentials: true,
                        success: function (data) {
                            if (data.status === 0) {
                                _this.options = [{
                                    value: _this.selectedCompanyId,
                                    label: data.result.name + "/" + data.result.legalRep + "/" + data.result.ucc,
                                }]
                            }
                        },
                        error: function (xhr, errorType, error) {
                            alert('Ajax request error, errorType: ' + errorType + ', error: ' + error)
                        }
                    });
                }
            },
            onSelectedChange() {
                console.log("Blur:", this.selectedCompanyId)
                for (let i = 0; i < this.options.length; i++) {
                    this.options[i].label = this.options[i].label.replace("<em>", "")
                    this.options[i].label = this.options[i].label.replace("</em>", "")
                }
            }
        },
    });
</script>